<template>
  <!-- 商务列表 -->
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard :isright="true" title="订单列表">
        <div class="businFilter"></div>
        <template #right>
          <ComForm
            :config="config"
            :list="comForm"
            @EventReset="reset"
            @EventOnsubmit="inquireFn"
            @eventAdd="addFn"
          ></ComForm>
        </template>
        <div class="businTalbe">
          <ComTable
            :config="config"
            :pagination="{
              total: pageing.total,
              pageNum: pageing.pageNum,
              pageSize: pageing.pageSize,
            }"
            :list="tableData"
            :modes="tableModes"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          >
            <el-table-column align="left" width="100" label="操作">
              <template slot-scope="scope">
                <span
                  @click="
                    drawer = true;
                    RowClickFn(scope.row);
                  "
                  style="color: #1890ff"
                  v-hasPermi="['base:label:edit']"
                  >编辑</span
                >
              </template>
            </el-table-column>
          </ComTable>
        </div>
      </NewCard>
      <Comdrawer
        size="60%"
        title="编辑"
        @eventColse="handleClose"
        :drawer="drawer"
      >
        <div class="businEdit">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <!-- <el-form-item label="商务昵称" prop="nickName">
              <el-input v-model="form.nickName"></el-input>
            </el-form-item> -->
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="用户id" prop="userId">
              <el-select
                style="width: 100%"
                v-model="form.userId"
                placeholder="请选择活动区域"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="手机号" prop="phonenumber">
              <el-input v-model.number="form.phonenumber"></el-input>
            </el-form-item> -->
            <el-form-item label="邮箱" prop="workMail">
              <el-input v-model="form.workMail"></el-input>
            </el-form-item>
            <el-form-item label="邮箱密钥" prop="mailPwd">
              <el-input v-model="form.mailPwd"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submit('form')"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </Comdrawer>
    </div>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import ComForm from "../../../components/comForm.vue";
import ComTable from "../../../components/comTable.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
import {
  getbusinessManageListApi,
  deitbusinessManageListApi,
  addbusinessManageListApi,
  getuserid,
} from "../../../newApi_3-24/business/businessManage";

export default {
  name: "businessManage",
  components: { NewCard, ComForm, ComTable, Comdrawer },
  data() {
    return {
      // 表格配置
      config: {
        quanxian: "base:label:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "请输入姓名",
            formType: "input",
            mode: "name",
            label: "",
            value: "",
          },
          {
            placeholder: "请输入手机号",
            formType: "input",
            mode: "cellNumber",
            label: "",
            value: "",
            select: [],
          },
        ],
      },
      // 标签数据
      tableData: [],
      // 表格参数
      tableModes: [
        // {
        //   label: "商务昵称",
        //   mode: "nickName",
        //   showOverflowTooltip: true,
        // },
        {
          label: "姓名",
          mode: "name",
        },
        // {
        //   label: "手机号",
        //   mode: "phonenumber",
        //   showOverflowTooltip: true,
        // },

        {
          label: "邮箱",
          mode: "workMail",
        },
        {
          label: "负责用户",
          mode: "userCount",
        },
        {
          label: "创建时间",
          mode: "createTime",
        },
      ],
      //表单验证
      // rules: {
      //   nickname: [
      //     {
      //       type: "string",
      //       required: true,
      //       message: "请输入昵称",
      //       trigger: "blur",

      //     },
      //   ],
      //   name: [
      //     {

      //       required: true,
      //       message: "请输入姓名",
      //       trigger: "blur",
      //     },
      //   ],
      //   cellNumber: [
      //     {
      //       type: "number",
      //       required: true,
      //       message: "请输入正确的手机号",
      //       trigger: "blur",
      //     },
      //     {
      //       pattern: /^1[3|4|5|7|8][0-9]{9}$/,
      //       message: "手机号码格式不正确",
      //       trigger: "blur",
      //     },
      //   ],
      //   email: [
      //     {
      //       type: "email",
      //       required: true,
      //       message: "请输入正确的邮箱",
      //       trigger: "blur",
      //     },
      //   ],
      //   secretKey: [
      //     {
      //       type: "password",
      //       required: true,
      //       message: "请输入邮箱密钥",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        userId: [
          { required: true, message: "请选择对应的类型", trigger: "blur" },
        ],
        workMail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
            message: "邮箱码格式不正确",
            trigger: "blur",
          },
        ],
        mailPwd: [
          { required: true, message: "邮箱秘钥不能为空", trigger: "blur" },
        ],
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //编辑抽屉是否弹出
      drawer: false,
      //编辑抽屉 从右侧弹出
      direction: "rtl",
      //编辑抽屉 form数据
      form: {
        // nickname: "",
        name: "",
        phonenumber: "",
        workMail: "",
        mailPwd: "",
        userId: "",
      },
      //用户id的集合
      options: [],
    };
  },
  created() {
    this.getbusinessManagefn();
    this.getuseridfn();
  },
  methods: {
    //查询userid

    async getuseridfn() {
      const _this = this;
      let { code, rows, total } = await getuserid(_this.pageing);
      if (code != 200) return;
      rows.forEach((item, index) => {
        let re = {};
        re["value"] = item.userId;
        re["label"] = item.nickName;
        this.options.push(re);
      });
    },

    //查询商务类别信息
    async getbusinessManagefn() {
      const _this = this;
      let { code, rows, total } = await getbusinessManageListApi(_this.pageing);
      if (code != 200) return;
      _this.pageing.total = total;
      this.tableData = rows;
      console.log(rows, "rows");
    },
    //回写商务类型
    RowClickFn(row) {
      console.log(row, "rowrowrow");
      let changeRow = JSON.parse(JSON.stringify(row));
      this.form = changeRow;
    },
    //信息提交按钮
    async submit(formName) {
      await this.$refs[formName].validate();
      if (this.form.id == null) {
        this.addbusinessManagefn();
        // this.form={};
      } else {
        this.comfirmEdit();
      }
    },
    //编辑商务类型信息
    async comfirmEdit() {
      let editForm = this.form;
      let { code, msg } = await deitbusinessManageListApi(editForm);
      if (code != 200) return;
      this.getbusinessManagefn();
      this.$message({
        message: msg,
        type: "success",
      });
      this.drawer = false;
    },
    //新增商务类型信息
    async addbusinessManagefn() {
      let editForm = this.form;
      let { code, msg } = await addbusinessManageListApi(editForm);
      if (code != 200) return;
      this.getbusinessManagefn();
      this.$message({
        message: msg,
        type: "success",
      });
      this.drawer = false;
    },
    //分类查询
    inquireFn(paramsArr) {
      // 筛选数据
      let { pageing } = this;
      paramsArr.forEach((item) => {
        for (const key in item) {
         
          this.pageing[key] = item[key];
        }
      });
      pageing.pageNum = 1;
      this.getbusinessManagefn();
    },
    //新增列表数据
    addFn() {
      this.drawer = true;
      this.form = {};
    },
    //重置
    reset() {
      this.form = {
        name: "",
        phonenumber: "",
      };
      this.pageing = { pageNum: 1, pageSize: 10, total: 0 };
    },
    // 当前页发生改变时

    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getbusinessManagefn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getbusinessManagefn();
    },
    handleClose() {
      this.drawer = false;

      this.$refs.form.resetFields();
      this.form = {
        name: "",
        phonenumber: "",
        workMail: "",
        mailPwd: "",
        userId: "",
      };
      // this.$nextTick(() => {
      //       this.$refs["form"].clearValidate();
      //     });
    },
  },
};
</script>

<style scoped>
.label-box-content {
  position: relative;
}
.label-box-content >>> .top::after {
  height: 1px;
  background-color: #e6ebf5;
}
/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}
>>> .el-form-item {
  width: auto;
  margin-bottom: 0;
}
.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.businFilter >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.businFilter >>> .container .right {
  margin-top: 0;
}

/* 右侧抽屉 */
.businEdit {
  padding: 0 30px;
}
.businEdit .el-form-item {
  margin-bottom: 20px;
}
</style>